<template>
  <div>
    <a-form layout="inline" :model="queryModel" v-if="searchBox">
      <a-form-item label="搜索词">
        <a-input v-model:value="queryModel.keyWord" placeholder="请输入搜索关键字" allow-clear />
      </a-form-item>
      <a-space>
        <a-button type="primary" @click="list">查询</a-button>
        <a-button @click="resetQuery">重置</a-button>
      </a-space>
    </a-form>
    <div class="functionBox">
      <a-space class="left">
        <a-button type="dashed" :icon="h(PlusOutlined)" @click="operator(0)">新增</a-button>
      </a-space>
      <a-space class="right">
        <a-button size="small" shape="circle" :icon="h(ReloadOutlined)" @click="list" />
        <a-button size="small" shape="circle" :icon="h(SearchOutlined)" @click="() => searchBox = !searchBox" />
      </a-space>
    </div>
    <div ref="basePoint" :style="`height: ${ windowHeight - elementToTopHight - 7 }px !important;`">
      <a-table
          :columns="columns"
          @resizeColumn="handleResizeColumn"
          :pagination="false"
          :locale="{ emptyText: '暂无数据' }"
          :data-source="tableData"
          :scroll="{ y: ( windowHeight - elementToTopHight - 116 ) + 'px' }"
      >
        <template #bodyCell="{ column, record }">
          <template v-if="column.dataIndex === 'action'">
            <a-button type="link" @click="operator(0, null,record.id)">新增</a-button>
            <a-button type="link" @click="operator(1,record.id)">编辑</a-button>
            <a-popconfirm title="是否要真的这个部门嘛!" @confirm="deleteDept(record.id)">
              <template #icon><question-circle-outlined style="color: red" /></template>
              <a-button type="link" >删除</a-button>
            </a-popconfirm>
          </template>
        </template>
      </a-table>
      <div class="pagination">
        <a-pagination
            size="small"
            :disabled="total == 0"
            :total="total"
            show-size-changer
            @change="pageChange"
            show-quick-jumper />
      </div>
    </div>
    <a-modal
        width="620px"
        v-model:open="operatorStore.open"
        :title="operatorStore.cmd == 0 ? '新增菜单' : '编辑菜单'"
        @ok="submitOperator"
        @cancel="resetFrom">
      <a-form
          :model="dept"
          labelAlign="right"
          :label-col="{ style: { width: '80px' } }"
          :rules="rules"
          ref="formRef"
      >
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="上级部门" name="pId">
              <a-tree-select
                  checkable
                  v-model:value="dept.pId"
                  defaultValue='主部门'
                  :allowClear="true"
                  showSearch
                  style="width: 100%"
                  :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
                  placeholder="选择上级部门"
                  tree-default-expand-all
                  :fieldNames="{ children:'children', label:'name', value: 'id' }"
                  :tree-data="treeDept"
                  tree-node-filter-prop="name"
              />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="邮箱" name="email">
              <a-input v-model:value="dept.email" placeholder="请输入邮箱" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="部门名称" name="name">
              <a-input v-model:value="dept.name" placeholder="请输入菜单名称" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="排序" name="sortOrder">
              <a-input type="number" v-model:value="dept.sortOrder" placeholder="请输入排序(越大越靠前)" />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="[18,0]">
          <a-col :span="12">
            <a-form-item label="负责人" name="leader">
              <a-input v-model:value="dept.leader" placeholder="请输入负责人姓名" />
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="联系方式" name="phone">
              <a-input v-model:value="dept.phone" placeholder="请输入联系方式" />
            </a-form-item>
          </a-col>
        </a-row>
      </a-form>

    </a-modal>
  </div>
</template>

<script setup lang="ts">
    import useDept from "@/hooks/useDept";
    import { h } from "vue";
    import {
      PlusOutlined,
      QuestionCircleOutlined,
      ReloadOutlined,
      SearchOutlined
    } from "@ant-design/icons-vue";
    import DynamicHeight from "@/utils/DynamicHeight";
    const { basePoint , windowHeight , elementToTopHight } = DynamicHeight();
    const {
      queryModel , searchBox , resetQuery ,
      total , columns , tableData ,
      pageChange , operator  , operatorStore ,
      submitOperator , resetFrom , dept , rules ,
      formRef , list , treeDept , deleteDept ,
      handleResizeColumn
    }  = useDept();
</script>

<style scoped lang="scss">
    .functionBox {
      margin: 18px 0 12px 0;
      display: flex;
      justify-content: space-between;
    }
    .pagination {
      margin: 8px 0;
      display: flex;
      justify-content: end;
    }
</style>
